<template>
  <ElRow>
    <ElCol :span="22">
      <Search
        :schema="allSchemas.searchSchema"
        @search="setSearchParams"
        @reset="setSearchParams"
      />
    </ElCol>
    <ElCol :span="2">
      <ElButton style="margin-bottom: 18px" type="primary" @click="showAddVideoModel"
        >添加
      </ElButton>
    </ElCol>
  </ElRow>
  <Table
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :columns="allSchemas.tableColumns"
    :data="dataList"
    :pagination="{
      total: total
    }"
    showAction
    @register="tableRegister"
    @refresh="refresh"
  />
  <AddVideoTabTableModel ref="addVideoModel" />
  <EditVideoTypeModel ref="editVideoTypeModel" />
  <VideoDetailDrawer ref="videoDetailDrawer" />
</template>
<script setup lang="tsx">
import { Search } from '@/components/Search'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import {
  delBatchPlStudyPlanVideoType,
  getPlStudyPlanVideoTypePageListApi,
  manualPlanTask
} from '@/api/studyPlan/video'
import { ref, defineProps, reactive, onMounted, nextTick, unref } from 'vue'
import {
  ElDialog,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElCol,
  ElRow,
  ElTabPane,
  ElButton,
  ElMessage
} from 'element-plus'
import AddVideoTabTableModel from '@/views/StudyPlan/videoPlan/components/addVideoTabTableModel.vue'
import EditVideoTypeModel from '@/views/StudyPlan/videoPlan/components/editVideoTypeModel.vue'
import VideoDetailDrawer from '@/views/StudyPlan/videoPlan/components/videoDetailDrawer.vue'

const editVideoTypeModel = ref()
const videoDetailDrawer = ref()
const currentRow = ref(null)
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const res = await getPlStudyPlanVideoTypePageListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      type: 0,
      studyPlanId: props.studyPlan.id,
      ...searchParams.value
    })
    return {
      list: res.data.records,
      total: res.data.total
    }
  },
  fetchDelApi: async () => {
    let boo = false
    const a = {}
    a['idsList'] = ids.value
    const res = await delBatchPlStudyPlanVideoType(a)
    if (res.code == '00000') {
      boo = true
    }
    return boo
  }
})

const delLoading = ref(false)
const ids = ref<string[]>([])
const delData = async (row) => {
  console.log(row, 'row')
  const elTableExpose = await getElTableExpose()
  ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v) => v.id) || []
  delLoading.value = true
  await delList(unref(ids).length).finally(() => {
    delLoading.value = false
  })
}
const updateData = async (row) => {
  manualPlanTask({ plStudyPlanVideoTypeId: row.id }).then((res) => {
    if (res.code == '00000') {
      ElMessage({ message: '更新成功！', type: 'success' })
    }
  })
}
const addVideoModel = ref()
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, setProps, refresh, getElTableExpose, delList } = tableMethods

const props = defineProps({
  studyPlan: {
    type: Object,
    default: () => {}
  }
})
const columns = reactive<CrudSchema[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index',
    search: {
      hidden: true
    }
  },
  {
    field: 'name',
    label: '名称',
    search: {
      component: 'Input'
    },

    form: {
      component: 'Input',
      colProps: {
        span: 24
      },
      detail: {
        span: 24
      }
    }
  },
  {
    field: 'studyNum',
    label: '学习集数',
    search: {
      hidden: true
    }
  },
  {
    field: 'cronTab',
    label: '周期',
    search: {
      hidden: true
    }
  },
  {
    field: 'dayNum',
    label: '每日学习次数',
    search: {
      hidden: true
    }
  },
  {
    field: 'updateType',
    label: '更新类型',
    search: {
      hidden: true
    },
    slots: {
      default: (data: any) => {
        return (
          <ElTag type={data.row.updateType === 0 ? 'success' : 'danger'}>
            {data.row.updateType === 0 ? '自动' : '手动'}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'studyFlag',
    label: '状态',
    search: { hidden: true },
    slots: {
      default: (data: any) => {
        return (
          <ElTag
            type={
              data.row.studyFlag === 2 ? 'success' : data.row.studyFlag === 1 ? 'warning' : 'danger'
            }
          >
            {data.row.studyFlag === 2 ? '学习完成' : data.row.studyFlag === 1 ? '学习中' : '未学习'}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'modifyTime',
    label: '更新时间',
    search: {
      hidden: true
    }
  },
  {
    field: 'action',
    align: 'center',
    width: '200px',
    headerAlign: 'center',
    label: '操作',
    search: { hidden: true },
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElButton
              type="primary"
              style="padding:0px"
              text
              onClick={() => showEditModel(data.row)}
            >
              编辑
            </ElButton>
            <ElButton type="danger" style="padding:0px" text onClick={() => delData(data.row)}>
              删除
            </ElButton>
            <ElButton type="primary" style="padding:0px" text onClick={() => updateData(data.row)}>
              更新
            </ElButton>
            <ElButton
              type="success"
              style="padding:0px"
              text
              onClick={() => showDetailDrawer(data.row)}
            >
              详情
            </ElButton>
          </>
        )
      }
    }
  }
])
const showAddVideoModel = () => {
  addVideoModel.value.isShowModel(props.studyPlan, 0)
}
const showEditModel = (row) => {
  editVideoTypeModel.value.isShowModel(row)
}
const showDetailDrawer = (row) => {
  row.type = 1
  videoDetailDrawer.value.isShowDrawer(row)
}

const searchParams = ref({})
const { allSchemas } = useCrudSchemas(columns)
const setSearchParams = (params: any) => {
  console.log(params, 'iii')
  params.name = params.name
  searchParams.value = params
  getList()
}
</script>
